<template>
    <PageWrapper>
        <Card>
            <a-tabs @change="handleTabChange">
                <a-tab-pane key="1" tab="短信设置" :forceRender="true">
                    <Message ref="message" @submit="handleSubmit" />
                </a-tab-pane>
                <a-tab-pane  key="2" tab="充电设置" :forceRender="true">
                    <Charge  ref="charge" @submit="handleSubmit" />
                </a-tab-pane>
                <a-tab-pane  key="3" tab="发票设置" forceRender="true">
                    <Invoice ref="invoice"  @submit="handleSubmit" />
                </a-tab-pane>
            </a-tabs>
        </Card>
    </PageWrapper>
</template>
<script setup>
  import { ref, onMounted } from 'vue';
  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
  import { Card } from 'ant-design-vue';
  import Message from './components/message.vue';
  import Charge from './components/charge.vue';
  import Invoice from './components/invoice.vue';
  import { defHttp } from '@/utils/http/axios';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const message = ref(null);
  const charge = ref(null);
  const invoice = ref(null);
  const config = ref(null);
  onMounted(async() => {
    config.value = await defHttp.get({
        url: '/admin/setting/list',
    })  
    
    message.value.setData(config.value);
    charge.value.setData(config.value);
    invoice.value.setData(config.value);
  })
  const handleSubmit = async (v) => {
    const update = await defHttp.post({
        url: '/admin/setting/update',
        params: v,
    })
    createMessage.success('修改成功');
  }
</script>